<template>
    <div>
        <Card>
            <Row>
                <Button type="primary" icon="md-add" size="large" @click="appearModal()">新增</Button>
                <Tooltip content="请先下载模板">
                    <Button type="warning" icon="ios-undo" @click="openImport" style="margin:5px 5px">
                        导入供应商
                    </Button>
                </Tooltip>
                <Button type="info" icon="md-download" @click="downloadExcel" style="margin:5px 5px">下载模板</Button>
            </Row>

            <Row>
                <el-table stripe border :data="tableData">
                    <template slot="empty">暂无数据</template>
                    <el-table-column label="供应商名称" prop="supplierName"></el-table-column>
                    <el-table-column label="联系人" prop="contactsName"></el-table-column>
                    <el-table-column label="电话" prop="telephone"></el-table-column>
                    <el-table-column label="手机" prop="mobileTelephone"></el-table-column>
                    <el-table-column label="邮箱" prop="eMail"></el-table-column>
                    <el-table-column label="地址">
                        <template slot-scope="scope">
                            {{scope.row.address}}/{{scope.row.detailAddress}}
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="remark"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="appearModal(scope.row)">修改</el-button>
                            <el-button size="mini" type="warning" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </Row>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <Modal v-model="modalVisible" :title="modalTitle">
            <el-form :model="supplier" :rules="rules" ref="supplierForm">
                <el-form-item label="供应商名称" prop="supplierName">
                    <el-input v-model="supplier.supplierName"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="supplier.contactsName"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="supplier.telephone"></el-input>
                </el-form-item>
                <el-form-item label="手机">
                    <el-input v-model="supplier.mobileTelephone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="supplier.eMail"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-cascader v-model="sendOptions" :options="sendaddresss" @change="handleChange" size=“large” clearable></el-cascader>
                    <el-input v-model="supplier.detailAddress" placeholder="详细地址"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="supplier.remark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary"  @click="handleAdd('supplierForm')">确 定
                </el-button>
            </div>
        </Modal>

        <Modal v-model="importVisible" title="导入供应商" class="modal-content" :mask-closable="false">
            <el-form ref="uploadFileForm" label-position="right">
                <el-form-item label="上传文件">
                    <el-upload class="upload-demo" ref="upload" :action="act"
                               :on-preview="handlePreview" :on-remove="handleRemove"
                               :auto-upload="false" accept=".xlsx,.xls" :headers="{'x-access-token':token}"
                               :on-success="filesuccess" :on-error="filefail" :limit="1" :multiple="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传.xlsx/.xls文件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="submitUpload()">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {regionData, CodeToText, TextToCode} from "element-china-area-data";
    import baseURL from "_conf/url";
    import Cookies from "js-cookie";
    import {TOKEN_KEY} from "@/libs/util";

    export default {
        data(){
            return{
                pageNum:1,
                pageSize:10,
                pageTotal:0,
                modalTitle:"",
                modalVisible:false,
                importVisible:false,
                sendaddresss: regionData,CodeToText,TextToCode,
                token: Cookies.get(TOKEN_KEY),
                act:baseURL+"/api/spsc/excel",

                tableData:[],
                sendOptions:[],

                supplier:{},
                rules:{
                    supplierName:[
                        {
                            required: true,
                            message: "请输入供应商名称",
                        },
                    ],
                },
            };
        },
        created:function () {
            this.loadData();
        },
        methods:{
            loadData() {
                this.getRequest("/api/spsc/suppliers?pageNum="+this.pageNum+"&pageSize="+this.pageSize).then(resp=>{
                    if (resp.code==20000){
                        this.tableData=resp.data.list;
                        this.pageTotal=resp.data.total;
                    }
                });
            },
            appearModal(row){
                if (row==null){
                    this.modalTitle="新增";
                } else {
                    this.modalTitle="修改";
                    this.supplier=row;
                    if (row.address!=null && row.address!=""){
                        let address=row.address.split("/");
                        // 省份
                        this.sendOptions.push(TextToCode[address[0]].code);
                        // 城市
                        this.sendOptions.push(TextToCode[address[0]][address[1]].code);
                        // 地区
                        this.sendOptions.push(TextToCode[address[0]][address[1]][address[2]].code);
                    }
                }
                this.modalVisible=true;
            },
            handleChange(){
                if (this.sendOptions.length==0){
                    this.warehouse.address="";
                } else {
                    let province=CodeToText[this.sendOptions[0]]+"/";
                    let city=CodeToText[this.sendOptions[1]]+"/";
                    let area=CodeToText[this.sendOptions[2]];
                    this.supplier.address=province+city+area;
                }
            },
            handleAdd(supplierForm){
                this.$refs[supplierForm].validate((valid) => {
                    if (valid) {
                        this.postRequest("/api/spsc/supplier",this.supplier).then(resp=>{
                            if (resp.code==20000){
                                this.supplier={};
                                this.sendOptions=[];
                                this.modalVisible=false;
                                this.loadData();
                            }
                        });
                    };
                });
            },
            handleDelete(id){
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.getRequest("/api/spsc/supplier?id=" + id).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.pageNum = 1;
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    },
                });
            },
            openImport(){
                this.importVisible=true;
            },
            handlePreview(file) {
                this.file = file;
            },
            handleRemove(file, fileList) {

            },
            submitUpload(){
                if (this.file == null) {
                    this.$Message.error("请点击需要上传文件");
                } else {
                    this.$refs.upload.submit();
                    this.importVisible = false;
                }
            },
            filesuccess(response, file) {
                if (response.code == 20000) {
                    this.$Message.success("导入成功");
                    this.loadData();
                } else {
                    this.$Message.error(response.message);
                }
                this.$refs.upload.clearFiles();
            },
            filefail(response) {
                this.$Modal.error({
                    title: "上传失败",
                    content: "请稍后再试"
                });
                this.$refs.upload.clearFiles();
            },
            downloadExcel(){
                let url = " https://syl-estate-img.oss-cn-shenzhen.aliyuncs.com/template/供应商导入模板 .xlsx";
                window.location.href = url;
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            onCancel(){
                this.importVisible=false;
            },
        },
    }
</script>
